<template>
  <div class="image-loader-container">
    <img ref="placeholder" class="placeholder" :src="placeholder" />
    <img
      ref="finalImg"
      class="finalImg"
      :src="src"
      @load="handleLoad"
      @transitionend="handleTransitionEnd"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      default: 1500,
    },
  },
  methods: {
    handleLoad() {
      this.$emit("load");
      this.$refs.finalImg.style.transition = this.duration + "ms";
      this.$refs.finalImg.style.opacity = 1;
    },
    handleTransitionEnd() {
      this.$refs.placeholder.remove();
    },
  },
};
</script>

<style scoped lang="less">
.image-loader-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    &.placeholder {
      filter: blur(0.5vw);
    }
    &.finalImg {
      opacity: 0;
    }
  }
}
</style>